var inp = document.querySelectorAll('input');
var box = document.querySelector('.box');
var inputs = document.querySelectorAll('input');
var btn = document.querySelectorAll('button');
var strArr = [
    {
        name: '张三',
        phone: '18',
        education: '本科',
        age: '18',
        gay:'20000'
    },
    {
        name: '李四',
        phone: '20',
        education: '大专',
        age: '18',
        gay:'20000'
    },
    {
        name: '王五',
        phone: '22',
        education: '本科',
        age: '18',
        gay:'20000'
    },
    {
        name: '赵六',
        phone: '24',
        education: '大专',
        age: '18',
        gay:'20000'
    }
];
disAllStr(strArr);

// 遍历数组并且显示在table中
function disAllStr(strArr) {
    var tbody = document.createElement('tbody');
    box.appendChild(tbody);
    for (var i = 0; i < strArr.length; i++) {
        createTable(i + 1, tbody);
    }
    var tr = document.querySelectorAll('tr');
    for (var i = 1; i < strArr.length + 1; i++) {
        tr[i].children[1].innerHTML = strArr[i - 1].name;
        tr[i].children[2].innerHTML = strArr[i - 1].phone;
        tr[i].children[3].innerHTML = strArr[i - 1].education;
        tr[i].children[4].innerHTML = strArr[i - 1].age;
        tr[i].children[5].innerHTML = strArr[i - 1].gay;
        tr[i].children[6].innerHTML = "<button class='btn btn-danger' onclick='del()'>删除</button>";
        tr[i].children[7].innerHTML = "<button class='btn btn-primary' onclick='edit()'>编辑</button>";

    }

}

// 创建table表格
function createTable(j, tbody) {
    var trs = document.createElement('tr');
    tbody.appendChild(trs);
    var td = document.createElement('td');
    trs.appendChild(td);
    td.innerHTML = j;
    for (var i = 0; i < 7; i++) {
        var tds = document.createElement('td');
        trs.appendChild(tds);
    }
}
// 添加功能
function add() {
    var strObj = {
        name: inp[1].value,
        phone: inp[2].value,
        education: inp[3].value,
        age: inp[4].value,
        gay: inp[5].value
    }
    for (var i = 1; i < inp.length; i++) {
        if (inp[i].value == "" || inp[i].value == null || inp[i].value == undefined) {
            alert('请补全内容！');
            return false;
        }
    }
    if (check(inp[2].value)) {
        alert('该名字已存在！');
        return false;
    }
    strArr.push(strObj);
    clear();
    disAllStr(strArr);

}
// 根据id选择是否添加
function check(id) {
    if (strArr.length < 1) return false;
    for (var i = 0; i < strArr.length; i++) {
        if (strArr[i].age === id) {
            return true;
        }
    }
    return false;
}
// 清除tbody
function clear() {
    var tbody = document.querySelector('tbody');
    tbody.remove();
}
// 删除
function del() {
    var trs = document.activeElement.parentElement.parentElement;
    var id = trs.children[4].innerText;
    for (var i = 0; i < strArr.length; i++) {
        if (strArr[i].age === trs.children[4].innerText) {
            strArr.splice(i, 1);
        }
    }
    clear();
    disAllStr(strArr);
}
// 编辑
function edit() {
    var trs = document.activeElement.parentElement.parentElement;
    var btn = trs.querySelectorAll('button');
    for (var i = 1; i < 6; i++) {
        var inputs = document.createElement('input');
        inputs.setAttribute('type', 'text');
        inputs.style.width = "80%";
        inputs.value = trs.children[i].innerText;
        trs.children[i].innerHTML = "";
        trs.children[i].appendChild(inputs);
    }
    var inp = trs.querySelectorAll('input');
    inp[3].setAttribute('disabled', 'true');
    btn[0].getAttributeNode('class').value = 'btn btn-primary';
    btn[0].getAttributeNode('onclick').value = 'editToInp()';
    btn[0].innerHTML = "编辑";
    btn[1].getAttributeNode('class').value = 'btn btn-danger';
    btn[1].getAttributeNode('onclick').value = 'editToArr()';
    btn[1].innerHTML = "更新";
}// 修改数据到数组
function editToArr() {
    var trs = document.activeElement.parentElement.parentElement;
    var input = trs.querySelectorAll('input');
    var obj = {
        name: input[0].value,
        phone: input[1].value,
        education: input[2].value,
        age: input[3].value,
        gay: input[4].value
    }
    for (var i = 0; i < input.length; i++) {
        if (input[i].value == "" || input[i].value == null || input[i].value == undefined) {
            alert('请补全信息！');
            return false;
        }
    }
    var i = forEach(input[3].value);
    strArr.splice(i, 1, obj);
    clear();
    disAllStr(strArr);
    for (var i = 1; i < 6; i++) {
        inputs[i].value = "";
    }
    btn[1].getAttributeNode('onclick').value = "add()";
    btn[1].removeAttribute('style');
    btn[1].innerHTML = "添加";
    inputs[5].removeAttribute('disabled');
}
// 修改数据到数组
function editToArr() {
    var trs = document.activeElement.parentElement.parentElement;
    var input = trs.querySelectorAll('input');
    var obj = {
        name: input[0].value,
        phone: input[1].value,
        education: input[2].value,
        age: input[3].value,
        gay: input[4].value
    }
    for (var i = 0; i < input.length; i++) {
        if (input[i].value == "" || input[i].value == null || input[i].value == undefined) {
            alert('请补全信息！');
            return false;
        }
    }
    var i = forEach(input[3].value);
    strArr.splice(i, 1, obj);
    clear();
    disAllStr(strArr);
    for (var i = 1; i < 5; i++) {
        inputs[i].value = "";
    }
    btn[1].getAttributeNode('onclick').value = "add()";
    btn[1].removeAttribute('style');
    btn[1].innerHTML = "添加";
    inputs[5].removeAttribute('disabled');
}
function forEach(id) {
    for (var i = 0; i < strArr.length; i++) {
        if (strArr[i].age.indexOf(id) + 1) {
            return i;
        }
    }
    return -1;
}
// 模糊查询
function vagueSel() {
    var temArr = [];
    var str = inputs[0].value;
    for (var i = 0; i < strArr.length; i++) {
        if (strArr[i].name.indexOf(str) + 1 || strArr[i].phone.indexOf(str) + 1 || strArr[i].education.indexOf(str) + 1 || strArr[i].age.indexOf(str) + 1) {
            temArr.push(strArr[i]);
        }
    }
    clear();
    disAllStr(temArr);
}